<template>
  <div class="img-page">
        <input id="topicId" type="hidden" value="46"/>
        <input id="isAdmin" type="hidden" value=""/>



        <div class="clearfix"></div>

        <!-- Navigation initialization -->
        <input id="STATICURL" type="hidden" value="//static.clewm.net/cli"/>


        <!-- 导航菜单 -->
        <nav class="cli_nav new-light scene_mobile clearfix">
      <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
        <li><router-link class="t06971093650622ab_sep [navigation_text]" to="/qrcode/text" @click="StatisticsData(120,11)" title="生成文本二维码">文本</router-link></li>
        <li><router-link class="tab_sep [navigation_url]" to="/qrcode/url" @click="StatisticsData(120,12)" title="生成网址二维码">网址</router-link></li>
        <li><router-link class="tab_sep [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
        <li><router-link class="tab_sep on [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
        <li><router-link class="tab_sep [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
        <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
        <li><router-link class="tab_sep [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
        <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
        <li><router-link class="tab_sep [navigation_batch]" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
        <li><router-link class="tab_sep [navigation_tools]" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
        <li class="pull-right right-nav-items none-after-form">
          <ul>
            <li class="pull-left nav-tool-popover-scan-new">
              <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                <i class="clifont anticon-moban1"></i>
                模板库建码
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

        <!-- Main content wrapper -->
        <div class="wrapper new-light mobile-scene-min-width adaptive-min-height">
            <div class="page-main-content p-b-md">
                <div class="alert alert-warning none" id="VerifyTip"></div>
                <div class="row noMagrin x-initContent">
                    <!-- Left column: Upload area -->
                    <div class="col-md-8 noPadding" style="width: 67.6%; float: left;">
                        <div class="qrgenerate-box">
                            <div class="upload-wrap upload-wrapper">
                                <input id="imgfile" type="hidden" value=""/>
                                <input id="filename" type="hidden" value=""/>
                                <input id="pretype" type="hidden" value="1"/>

                                <!-- Upload area -->
                                <div class="upload-before" id="upload-before" onclick="StatisticsData(110, 124003)">
                                    <div class="upload-before-default">
                                        <div class="advanced-edit advanced-editor-size">
                                            <a class="cliLink advanced-editor" data-id="5" data-new-create-img-style="" href="//console.cli.im/nedit?pageFrom=frontBuild&action=more&create_from=60" onclick="StatisticsData(110, 78)" rel="opener nofollow" target="_blank">
                                                <i class="clifont anticon-gaojibianji"></i>高级编辑
                                            </a>
                                        </div>
                                        <i class="upload-icon clifont anticon-shangchuantupian"></i>
                                        <h2 class="upload-text">上传图片</h2>
                                        <p class="upload-img-desc-new text-xs text-grey">
                                            支持拖拽、粘贴图片上传，可上传多张，单图最大30MB，支持多种展示效果
                                            <a class="text-blue" href="help/95934.html" target="_blank">常见问题</a>
                                        </p>
                                        <p class="text-xs upload-img-tip" id="upload-first-tips">请先点此上传图片</p>
                                    </div>

                                    <div class="dragtip drag">
                                        <i class="clifont anticon-cli-upload"></i>
                                        <div style="position: relative">
                                            <p class="tip-text">文件拖到此处</p>
                                            <p>可一次拖拽多个文件</p>
                                        </div>
                                    </div>

                                    <div class="dragtip drop">
                                        <i class="clifont anticon-cli-upload"></i>
                                        <p class="tip-text">松开上传</p>
                                    </div>

                                    <input accept=".jpg,.jpeg,.gif,.png" class="uploadfile x-uploadfile" data-nc-upload="" data-pre-init="true" data-uptype="nc-imgs" disabled="disabled" id="filedatacode" multiple="" name="Filedata" style="cursor:not-allowed;" title="" type="file"/>
                                </div>

                                <!-- Uploading area -->
                                <div class="uploading none clearfix" id="uploading">
                                    <div class="upload-pic-content" id="upload-pic-content">
                                        <div class="upload-file-trigger-item" data-add-more-pic="">
                                            <div style="margin-top: 60px;">
                                                <span class="clifont anticon-cli-add-1"></span>
                                            </div>
                                            <span style="margin-top: 12px;line-height: 20px; font-size: 14px;">添加图片</span>
                                        </div>
                                    </div>

                                    <!-- Image preview settings -->
                                    <div class="text-darkgrey text-xs img-prew-type-setting" data-type="1" id="style-setting">
                                        <a class="open-modal-link pointer" id="open-modal-link" onclick="StatisticsData(110,109)">
                                            多图展示<span class="clifont anticon-cli-question-o text-grey" id="open-modal-link-icon"></span>
                                        </a>

                                        <div class="image-preview-popover atFirst fade bottom" role="tooltip">
                                            <div class="arrow beforeNone" style=""></div>
                                            <div class="open-modal-popover clearfix">
                                                <div class="pull-left text-center open-modal-popover-content open-modal-popover-content-first">
                                                    <p class="text-xs p-b-sm">平铺</p>
                                                    <img alt="平铺效果预览图" src="../../assets/images/b24224bfdea2.png" srcset="//static.clewm.net/static/images/preview-img-tile-example@2x_ad6c1ab.png 2x"/>
                                                    <p class="open-modal-popover-status">已选</p>
                                                </div>
                                                <div class="pull-right text-center open-modal-popover-content open-modal-popover-content-second">
                                                    <p class="text-xs p-b-sm">轮播</p>
                                                    <img alt="轮播效果预览图" src="../../assets/images/e12f218773b8.png" srcset="//static.clewm.net/static/images/preview-img-swiper-example@2x_3ffc2a0.png 2x"/>
                                                    <p class="open-modal-popover-status">已选</p>
                                                </div>
                                            </div>
                                        </div>

                                        <label class="ant-radio-wrapper m-l-sm">
                                            <span class="ant-radio">
                                                <input checked="" class="ant-radio-input" name="imagePreType" type="radio" value="1"/>
                                                <span class="ant-radio-inner"></span>
                                            </span>
                                            平铺
                                        </label>

                                        <label class="ant-radio-wrapper">
                                            <span class="ant-radio">
                                                <input class="ant-radio-input" name="imagePreType" type="radio" value="0"/>
                                                <span class="ant-radio-inner"></span>
                                            </span>
                                            轮播
                                        </label>

                                        <!-- Image style selector -->
                                        <div class="select-img-style">
                                            <span class="select-label">图片样式：</span>
                                            <input id="nc_image_style" type="hidden" value="2"/>
                                            <div class="select-img-value">
                                                <span>撑满</span>
                                                <i class="fa fa-angle-down"></i>
                                            </div>
                                            <div class="dropdown-menu text-xs">
                                                <span class="dropdown-item" data-text="留白" data-value="1" href="javascript:void(0);">
                                                    留白
                                                    <div class="dropdown-item-popover">
                                                        <img alt="留白效果预览图" src="../../assets/images/05b5563bd625.png"/>
                                                    </div>
                                                </span>
                                                <span class="dropdown-item img-active" data-text="撑满" data-value="2" href="javascript:void(0);">
                                                    撑满
                                                    <div class="dropdown-item-popover">
                                                        <img alt="撑满效果预览图" src="../../assets/images/c0452b68f135.png"/>
                                                    </div>
                                                </span>
                                                <span class="dropdown-item" data-text="置顶" data-value="3" href="javascript:void(0);">
                                                    置顶
                                                    <div class="dropdown-item-popover">
                                                        <img alt="置顶效果预览图" src="../../assets/images/0dbfca1bd224.png"/>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-xs text-grey" style="position: absolute;right: 24px;top: 20px;">
                                        <a class="grey45-link advanced-editor" data-id="5" href="//console.cli.im/nedit?pageFrom=frontBuild&action=more&create_from=60" onclick="StatisticsData(110, 78)" rel="opener nofollow" target="_blank">
                                            <i class="clifont anticon-gaojibianji"></i>高级编辑
                                        </a>

                                        <div class="extra-image-preview-popover atSecond fade bottom" role="tooltip">
                                            <div class="arrow beforeNone"></div>
                                            <div class="open-modal-popover clearfix">
                                                <div class="pull-left text-center open-modal-popover-content open-modal-popover-content-first">
                                                    <p class="text-xs p-b-sm">留白</p>
                                                    <img alt="留白效果预览图" src="../../assets/images/05b5563bd625.png"/>
                                                    <p class="open-modal-popover-status">已选</p>
                                                </div>
                                                <div class="pull-left text-center open-modal-popover-content open-modal-popover-content-second">
                                                    <p class="text-xs p-b-sm">撑满</p>
                                                    <img alt="撑满效果预览图" src="../../assets/images/c0452b68f135.png"/>
                                                    <p class="open-modal-popover-status">已选</p>
                                                </div>
                                                <div class="pull-right text-center open-modal-popover-content open-modal-popover-content-third">
                                                    <p class="text-xs p-b-sm">置顶</p>
                                                    <img alt="置顶效果预览图" src="../../assets/images/0dbfca1bd224.png"/>
                                                    <p class="open-modal-popover-status">已选</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!-- Hidden inputs and tooltip -->
                                <input id="tjurl" type="hidden" value=""/>
                                <input id="tjuid" type="hidden" value=""/>
                                <input id="tjcoding" type="hidden" value=""/>
                                <input id="isturn" type="hidden" value=""/>

                                <div class="none" id="length-over-tip" role="tooltip">
                                    <div style="color: #999;">
                                        内容已超150字，生成的二维码图案过于复杂不易扫描，请使用
                                        <a class="link text-blue" href="help/60448.html" target="_blank">活码</a>
                                    </div>
                                </div>

                                <!-- Generate button -->
                                <div class="submit text-center" style="padding-bottom: 20px">
                                    <button class="btn green btn-green-shadow btn-cli-green" data-loading-text="正在生成..." id="click-create">
                                        生成活码
                                    </button>
                                    <a class="btn btn-fw green none" data-generate-qractive="" data-isactives="2" href="javascript:;" id="change_active2">生成活码</a>
                                </div>
                            </div>
                        </div>

                        <!--[if lt IE 10]>
                        <![endif]-->

                    </div>

                    <!-- Right column: QR Code display area -->
                    <div class="include-qrfun-origin">
                        <div class="qrbox col-md-4 img-qrcode-wrapper noQrCode noQrCode" data-is_create_code="0" id="qrfun-box">
                            <div class="qrcode-wrapper">
                                <!-- QR Code display tabs -->
                                <div class="qrfun-tab-content code-tab-content">
                                    <img id="snapQrimage" src="" style="display: none"/>

                                    <!-- After creation actions -->
                                    <div class="has-code-action after-create-qrfun-item">
                                        <div class="choose-label-style-tpl isSimpleStyle" id="choose_label_style_tpl">
                                            <div class="choose_label_style_tpl_name" data-container="body" data-content="" data-placement="bottom">
                                                标签样式：
                                            </div>
                                            <div class="choose-tpl-action cliLink" id="toggle_label_style_tpl">
                                                <span class="choose-tpl-action-text" id="choose_tpl_action_text">更换</span>
                                                <i class="clifont anticon-cli-angle-right"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- QR Code display -->
                                    <div class="qrcode">
                                        <table class="qrimage-wrap-loading qrimage-wrap b-a text-center" data-loading-text="<img style='margin-top: 126px;margin-bottom: 126px;width:48px;opacity:0.3;' src='//static.clewm.net/cli/images/cli-loading@2x.gif'>" data-qrimage-wrap="" id="click-create" style="border-radius:4px;">
                                            <tr>
                                                <td class="qrimage-td-h" data-is_create_code="0" style="color:#ececec;font-size: 16px;">
                                                    <img alt="生成的二维码" id="qrimage" src=""/>
                                                    <div class="deqr-wrapper" id="deqr-wrapper">
                                                        <router-link class="deqr-link" to="/qrcode/deqr" @click="StatisticsData(1,15)" style="padding-right: 0;padding-left: 4px;color: #666;" title="通过二维码图片，快速解析内容">
                                                            <span class="clifont anticon-cli-scanning"></span>解码
                                                        </router-link>
                                                    </div>
                                                    <span class="create-code-tip" data-create-code-tip="">
                                                        <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                                                    </span>
                                                </td>
                                            </tr>
                                        </table>

                                        <table class="qrimage-wrap b-a text-center none click-create-active" data-generate-qractive="" data-loading-text="" style="cursor: pointer;border-radius:2px;">
                                            <tr>
                                                <td class="qrimage-td-h" data-is_create_code="0" height="260px;" style="color:#ececec;font-size: 16px;">
                                                    <img alt="生成的二维码" id="qrimage" src=""/>
                                                    <div class="deqr-wrapper" id="deqr-wrapper">
                                                        <router-link class="deqr-link" to="/qrcode/deqr" @click="StatisticsData(1,15)" style="padding-right: 0;padding-left: 4px;color: #666;" title="通过二维码图片，快速解析内容">
                                                            <span class="clifont anticon-cli-scanning"></span>解码
                                                        </router-link>
                                                    </div>
                                                    <span class="create-code-tip" data-create-code-tip="">
                                                        <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                                                    </span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>

                                    <!-- QR Code tools -->
                                    <div class="tools-v2 tools after-create-qrfun-item" style="display: block;">
                                        <div class="when-have-code">
                                            <div class="tab-container">
                                                <div class="qr-style-tab-item template-item">
                                                    <div class="more-setting-info-wrap-box" id="more-setting-info-wrap-box">
                                                        <div class="qrcode-box more-setting-info-wrap">
                                                            <span class="more-setting-codetype-text">QR Code</span>，
                                                            <span class="more-setting-level-text">30%容错</span>
                                                            <span class="more-setting-size-text">，400×400px</span>
                                                            <i class="cliIcon anticon anticon-cli-settings more-setting-icon" style="font-size: 16px;"></i>
                                                        </div>
                                                        <div class="otherCode more-setting-info-wrap none">
                                                            <span class="otherCode-text">
                                                                <span class="otherCodeName">汉信码</span>
                                                            </span>
                                                            <i class="cliIcon anticon anticon-cli-settings more-setting-icon" style="font-size: 16px;"></i>
                                                        </div>
                                                    </div>

                                                    <div class="qr-style-tab-item beautify" style="display: block; text-align: center; font-size: 0;margin-bottom: 8px;">
                                                        <div class="btn-block new-up-icon-btn-wrapper" data-container="body" data-content="该码制暂不提供此功能" data-placement="bottom" id="upload-and-style-btn-wrapper" style="width: 100%;display: inline-flex;display: -ms-inline-flexbox;">
                                                            <button class="btn qrfun-btn qrfun-beautify-btn" id="upload-logo-btn" style="margin-right: 6px;" type="button">上传Logo</button>
                                                            <button class="btn qrfun-btn qrfun-beautify-btn" id="new-qr-style-func" type="button">二维码美化</button>
                                                            <button class="btn qrfun-btn qrfun-beautify-btn none" id="edit-filed-btn" style="margin-left: 6px;" type="button">修改字段</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Advanced QR tools -->
                                    <div class="tools" id="tools">
                                        <div style="display: none;">
                                            <ul class="row no-gutter text-darkgrey text-center tits" id="tools-tits">
                                                <li class="col-md-3 col-sm-3 col-xs-3 first" data-type="basic">基本</li>
                                                <li class="col-md-3 col-sm-3 col-xs-3" data-type="color" id="colorselect">颜色</li>
                                                <li class="col-md-3 col-sm-3 col-xs-3" data-type="logo">LOGO</li>
                                                <li class="col-md-3 col-sm-3 col-xs-3" data-type="beauty">美化器</li>
                                            </ul>

                                            <div class="boxs p-x-sm" id="tools-boxs">
                                                <!-- Basic settings -->
                                                <div class="tools-box base p-t-sm none">
                                                    <div class="row" id="level-and-size">
                                                        <div class="col-md-6 col-sm-6">
                                                            <div class="form-group row no-gutter" style="margin-bottom: 0px;">
                                                                <label class="form-control-label form-control-xs col-md-4 col-sm-4">容错</label>
                                                                <div class="col-md-8 col-sm-8">
                                                                    <div class="dropdown" id="level">
                                                                        <button aria-expanded="false" class="btn btn-xs btn-block white dropdown-toggle" data-toggle="dropdown">30%</button>
                                                                        <input id="level-value" type="hidden" value="H"/>
                                                                        <div class="dropdown-menu text-xs">
                                                                            <a class="dropdown-item" data-level="H" href="javascript:;">30%</a>
                                                                            <a class="dropdown-item" data-level="Q" href="javascript:;">25%</a>
                                                                            <a class="dropdown-item" data-level="M" href="javascript:;">15%</a>
                                                                            <a class="dropdown-item" data-level="L" href="javascript:;">7%</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 col-sm-6">
                                                            <div class="form-group row no-gutter" style="margin-bottom: 0px;">
                                                                <span class="form-control-label form-control-xs col-md-4 col-sm-4">大小</span>
                                                                <div class="col-md-8 col-sm-8">
                                                                    <button aria-expanded="true" class="btn btn-xs btn-block white dropdown-toggle" data-toggle="dropdown" id="size-btn">500 px </button>
                                                                    <div class="form-control pull-left size-range-wrap">
                                                                        <div id="size-range"></div>
                                                                    </div>
                                                                    <input id="size-value" type="hidden" value="500"/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="codetype-wrap form-group text-xs m-t-sm">
                                                        <label class="form-control-label form-control-xs pull-left p-x-0">码制</label>
                                                        <div class="dropdown pull-left codetype" id="codetype" style="margin-left: 13px">
                                                            <button aria-expanded="false" class="btn btn-xs btn-block white dropdown-toggle pointer" data-toggle="dropdown">
                                                                QR Code
                                                            </button>
                                                            <div class="dropdown-menu text-xs">
                                                                <a class="dropdown-item" data-codetype="qr" href="javascript:;">QR Code</a>
                                                                <a class="dropdown-item" data-codetype="hanxin" href="javascript:;">汉信码</a>
                                                                <a class="dropdown-item" data-codetype="pdf417" href="javascript:;">PDF417</a>
                                                                <a class="dropdown-item" data-codetype="dm" href="javascript:;">DataMatrix</a>
                                                            </div>
                                                        </div>
                                                        <a class="text-lightgrey m-l-sm pull-left index-question" data-html="true" data-original-title="<div style='width: 70px;'>什么是码制?</div>" data-placement="top" data-toggle="tooltip" href="help/48235.html" style="position: relative;top:3px;" target="_blank">
                                                            <i class="fa fa-question-circle"></i>
                                                        </a>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>

                                                <!-- Color settings -->
                                                <div class="tools-box color p-t-sm none">
                                                    <ul class="">
                                                        <li>
                                                            <span>前景</span>
                                                            <div class="colorpal">
                                                                <input class="iColorPicker span1" id="fgcolor" name="mycolor" type="text" value="#000000"/>
                                                                <div class="colorPicker-picker cp" id="icp_fgcolor" style="background-color: #000000;"></div>
                                                            </div>
                                                            <input id="colorvalue" style="display:none;" type="text" value="#000000"/>
                                                        </li>
                                                        <li class="pos-rlt">
                                                            <span>背景</span>
                                                            <div class="colorpal">
                                                                <input class="iColorPicker span1" id="bggcolor" name="mycolor" type="text" value="#ffffff"/>
                                                                <div class="colorPicker-picker cp" id="icp_bggcolor" style="background-color: #ffffff;"></div>
                                                            </div>
                                                            <input id="colorvalue1" style="display:none;" type="text" value="#ffffff"/>
                                                            <i class="fa fa-ban" id="bgc" style=""></i>
                                                        </li>
                                                        <li class="last">
                                                            <label class="">
                                                                <input checked="" id="tmbj" type="checkbox"/>
                                                                透明背景
                                                            </label>
                                                        </li>
                                                    </ul>
                                                    <div class="clearfix"></div>
                                                </div>

                                                <!-- Logo settings -->
                                                <div class="tools-box icons p-t-sm none">
                                                    <div class="add pos-rlt">
                                                        <input id="icon_img" name="icon_img" type="hidden" value=""/>
                                                        <div class="row">
                                                            <div class="col-md-6 col-sm-6" style="padding-left: 4px;padding-right: 8px;">
                                                                <form action="/upload/icon" class="btn-block form-file" enctype="multipart/form-data" method="post" target="iconupload">
                                                                    <input class="addFile_btn" data-type="uploadLogo" data-uptype="icon" id="filedatacodeicon" name="Filedata" type="file"/>
                                                                    <button class="btn btn-block white" style="font-size: 12px;line-height: 12px;height: 28px;" type="button">上传 LOGO</button>
                                                                </form>
                                                            </div>
                                                            <div class="col-md-6 col-sm-6" style="padding-left: 8px;padding-right: 4px;">
                                                                <button class="btn btn-block white" id="openlogotk" style="font-size: 12px;height: 28px;line-height: 12px;" type="button">常用 LOGO</button>
                                                            </div>
                                                        </div>
                                                        <div class="xshow text-center m-t-xs none" id="iconshow">
                                                            <img alt="" class="none" id="img_icon" src=""/>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Beauty tools -->
                                                <div class="tools-box mhq p-t-sm text-center row none">
                                                    <div class="col-md-6 col-sm-6" style="padding-left: 4px;padding-right: 8px;">
                                                        <button class="btn btn-block white" id="qr-style" style="font-size: 12px;font-size: 12px;padding: 6px;">快速美化器</button>
                                                    </div>
                                                    <div class="col-md-6 col-sm-6" style="padding-left: 8px;padding-right: 4px;">
                                                        <button class="btn btn-block white" id="qrfun-gjmh" onclick="StatisticsData(1,5)" style="font-size: 12px;margin-top:0px;font-size: 12px;padding: 6px;">高级美化器</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Reset buttons -->
                                        <div class="text-center none" id="redef" style="margin-top: 10px;">
                                            <a href="javascript:;" id="ReInitial" style="font-size: 12px;min-height: 0px;color:#999">恢复默认样式</a>
                                        </div>
                                        <div class="text-center none" id="redef_new" style="margin-top: 10px;">
                                            <a href="javascript:;" id="ReInitial_new" style="font-size: 12px;min-height: 0px;color:#999">恢复黑白样式</a>
                                        </div>
                                    </div>

                                    <!-- Fast print content -->
                                    <div class="qrfun-tab-content fastprint-content none">
                                        <div class="fastprint-top">
                                            <div class="img-wrapper" id="fastprint-preview">
                                                <div class="ant-spin ant-spin-spinning">
                                                    <span class="ant-spin-dot ant-spin-dot-spin">
                                                        <i class="ant-spin-dot-item"></i>
                                                        <i class="ant-spin-dot-item"></i>
                                                        <i class="ant-spin-dot-item"></i>
                                                        <i class="ant-spin-dot-item"></i>
                                                    </span>
                                                </div>
                                                <img alt="标签" class="none"/>
                                            </div>
                                            <p class="current-style">标签模板：<span class="style-name">经典样式</span><span class="pointer ml8 label-link" id="change_label_style">更换</span></p>
                                            <div class="btn-actions">
                                                <span class="pointer label-link change-label-link" data-from="tab-edit" id="fastprint">
                                                    <i class="cliIcon anticon anticon-edit"></i>
                                                    修改标签内容
                                                </span>
                                                <button class="btn block-green btn-block fastprint-btn" id="fastprint-download">下载标签图片</button>
                                            </div>
                                        </div>

                                        <!-- Print options -->
                                        <div class="print-wrapper" id="print-wrapper">
                                            <h4>打印方式</h4>
                                            <ul class="print-tabs">
                                                <li class="print-tab active" data-index="0">A4打印机</li>
                                                <li class="print-tab" data-index="1">标签打印机</li>
                                                <li class="print-tab" data-index="2">代印刷服务</li>
                                            </ul>

                                            <!-- A4 print content -->
                                            <div class="print-content print-a4">
                                                <div class="other-set-item">
                                                    <div class="label-wrapper">
                                                        <label>排版</label>
                                                    </div>
                                                    <div class="dropdown size-dropdown" id="label_size">
                                                        <button aria-expanded="false" class="btn other-set-dropdown-btn dropdown-toggle pointer" data-toggle="dropdown">
                                                            <span>60x65mm（1个/页）</span>
                                                            <i class="cliIcon anticon anticon-cli-angle-down"></i>
                                                        </button>
                                                        <div class="dropdown-menu">
                                                            <div class="dropdown-item-wrapper">
                                                                <a class="dropdown-item active" data-data-label_text="60x65mm（1个/页）" data-label_size="1" href="javascript:;">
                                                                    <span class="size-number">每页 <span class="bold">1个</span></span>
                                                                    <img alt="每页展示" src=""/>
                                                                    <span class="size-detail">每个 210 x 315mm</span>
                                                                    <span class="triangle"><i class="cliIcon anticon anticon-duoxuan"></i></span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-outline b-green text-green btn-block" id="a4-print" style="font-weight: normal;border-radius: 2px;">排版到A4纸上</button>
                                                <p class="text-center label-link down-label-link">
                                                    <a href="print/service.html" target="_blank">
                                                        标签落地指南
                                                        <i class="cliIcon anticon anticon-share-bottom-new"></i>
                                                    </a>
                                                </p>
                                            </div>

                                            <!-- Label printer content -->
                                            <div class="print-content print-label none">
                                                <p class="print-desc">可下载标签图片，使用标签打印机，随用随打，较为灵活</p>
                                                <a class="btn block-green btn-block learn-more" data-index="1" href="help/51114.html" target="_blank">详细了解</a>
                                                <p class="text-center label-link down-label-link">
                                                    <a href="print/service.html" target="_blank">
                                                        标签落地指南
                                                        <i class="cliIcon anticon anticon-share-bottom-new"></i>
                                                    </a>
                                                </p>
                                            </div>

                                            <!-- Print service content -->
                                            <div class="print-content print-service none">
                                                <p class="print-desc">代印刷标签，提供不干胶、亚克力、铝板、不锈钢等高品质材质</p>
                                                <a class="btn block-green btn-block learn-more" data-index="2" href="print/service.html" target="_blank">详细了解</a>
                                                <p class="text-center label-link down-label-link">
                                                    <a href="print/service.html" target="_blank">
                                                        标签落地指南
                                                        <i class="cliIcon anticon anticon-share-bottom-new"></i>
                                                    </a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- A4 content -->
                                    <div class="qrfun-tab-content a4-content none">
                                        <div class="img-wrapper" id="a4page-preview">
                                            <div class="ant-spin ant-spin-spinning">
                                                <span class="ant-spin-dot ant-spin-dot-spin">
                                                    <i class="ant-spin-dot-item"></i>
                                                    <i class="ant-spin-dot-item"></i>
                                                    <i class="ant-spin-dot-item"></i>
                                                    <i class="ant-spin-dot-item"></i>
                                                </span>
                                            </div>
                                            <img alt="a4单页" class="none" src=""/>
                                        </div>
                                        <p class="current-style">模板：<span class="style-name">经典样式</span><span class="pointer ml8 label-link" id="change_a4_style">更换</span></p>
                                        <button class="btn block-green btn-block btn-w120-h44" id="a4page" style="font-weight: normal;">编辑单页内容</button>
                                        <button class="btn green btn-block btn-cli-green" id="a4page-download" style="margin-top: 8px;">下载PDF文件</button>
                                    </div>

                                    <!-- Bottom tools -->
                                    <ul class="sub_nav qrcode-bottom sub_mobile_nav clearfix pull-right" id="qrcode-bottom-tool">
                                        <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="mh_link">
                                            <div class="popover_link_wrap">
                                                <a class="tab_sep m-r-0 divider code-meihua-style" href="https://mh.cli.im" onclick="StatisticsData(120,147101)" style="display: inline-block;" target="_blank" title="快速美化二维码图案，上传logo等">
                                                    <span class="clifont anticon-meihua"></span>美化
                                                </a>
                                                <div class="top-mark"></div>
                                                <div class="drop-down">
                                                    <span class="code-tools-adv-edit-tip">快速美化二维码图案，上传logo等</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="style-label-created">
                                            <div class="popover_link_wrap">
                                                <a href="javascript:;" id="style-label-created-link">
                                                    <span class="tab_sep m-r-0 code-meihua-style">
                                                        <span class="clifont anticon-zhizuobiaoqian"></span>制作标签
                                                    </span>
                                                </a>
                                                <div class="top-mark"></div>
                                                <div class="drop-down">
                                                    <span class="code-tools-adv-edit-tip">选择模板，填入数据，批量制作标签</span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Modal for more settings -->
                            <div class="modal fade modal-code-more-setting" data-backdrop="static" data-keyboard="false" id="modal-code-more-setting" role="dialog" tabindex="-1">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                            <h4 class="modal-title">下载设置</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="main-setting">
                                                <div class="wrap-item code-type-wrap" id="code-type-wrap">
                                                    <div class="label-title">
                                                        码制<i class="cliIcon anticon anticon-QuestionCircle code-type-popover-wrapper" data-container="body" data-content="<div class='common-popover-content'>提供 QR Code、汉信码、 PDF417、Data Matrix4种最常见的码制的生成。<a class='cliLink' href='https://cli.im/help/77753' target='_blank' onclick='StatisticsData(352,124334)'>了解详情</a></div>" data-placement="top" id="code-type-popover-wrapper" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                                                    </div>
                                                    <div class="radio-content">
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeTypeNew" type="radio" value="qr"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">QR Code</span>
                                                        </label>
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeTypeNew" type="radio" value="hanxin"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">汉信码</span>
                                                        </label>
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeTypeNew" type="radio" value="pdf417"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">PDF417</span>
                                                        </label>
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeTypeNew" type="radio" value="dm"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">Data Matrix</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="wrap-item code-type-wrap" id="code-level-wrap">
                                                    <div class="label-title">
                                                        容错率<i class="cliIcon anticon anticon-QuestionCircle code-level-popover-wrapper" data-container="body" data-content="<div class='common-popover-content'>容错率设置越高，二维码生成的码点密度越高，可在遮挡越多的情况下被扫描出来。<a class='cliLink' onclick='StatisticsData(352,124305)' href='https://cli.im/help/57415' target='_blank'>了解详情</a></div>" data-placement="top" id="code-level-popover-wrapper" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                                                    </div>
                                                    <div class="radio-content">
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeLevel" type="radio" value="L"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">7%</span>
                                                        </label>
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeLevel" type="radio" value="M"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">15%</span>
                                                        </label>
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeLevel" type="radio" value="Q"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">25%</span>
                                                        </label>
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeLevel" type="radio" value="H"/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">30%</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="wrap-item code-size-wrap" id="code-size-wrap">
                                                    <div class="label-title">尺寸：</div>
                                                    <div class="radio-content">
                                                        <label class="ant-radio-wrapper">
                                                            <span class="ant-radio">
                                                                <input class="ant-radio-input" name="codeSize" type="radio" value=""/>
                                                                <span class="ant-radio-inner"></span>
                                                            </span>
                                                            <span class="radio-text">400 x 400 px</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="wrap-item custom-size-wrap none" id="custom-size-wrap">
                                                    <div class="label-title">输入尺寸：</div>
                                                    <div class="input-wrap">
                                                        <div class="input-box">
                                                            <input class="custom-size-input" id="customSizeInput" name="codeSize" type="number" value="500"/>
                                                            <span class="unit-box">
                                                                <span class="unit-text">px</span>
                                                            </span>
                                                        </div>
                                                        <span class="size-tip">最大可设为1000px</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-primary success-btn" id="code-more-setting-submit" type="button">保存设置</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Vector format modal -->
                            <div class="modal fade modal-code-vector-fromat" id="modal-code-vector-fromat" role="dialog" tabindex="-1">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                            <h4 class="modal-title">
                                                下载矢量格式
                                                <span class="modal-title-text">矢量文件不带美化样式和字段，<a class="cliLink" href="help/77747.html" onclick="StatisticsData(352,124317)" target="_blank" title="下载矢量格式了解详情">了解详情</a></span>
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="main-setting">
                                                <div class="wrap-item code-vector-format" id="code-vector-format">
                                                    <div class="label-title">矢量格式：</div>
                                                    <div class="vector-content">
                                                        <div class="vector-download-item pdf-download" id="pdf-download" onclick="StatisticsData(352,124312)">
                                                            <div class="download-box">
                                                                <img alt="" src="../../assets/images/04d5532a149b.png"/>
                                                                <span class="format-text">PDF 矢量</span>
                                                            </div>
                                                        </div>
                                                        <div class="vector-download-item svg-download" id="svg-download" onclick="StatisticsData(352,124313)">
                                                            <div class="download-box">
                                                                <img alt="" src="../../assets/images/04d5532a149b.png"/>
                                                                <span class="format-text">SVG 矢量</span>
                                                            </div>
                                                        </div>
                                                        <div class="vector-download-item eps-download" id="eps-download" onclick="StatisticsData(352,124314)">
                                                            <div class="download-box">
                                                                <img alt="" src="../../assets/images/04d5532a149b.png"/>
                                                                <span class="format-text">EPS 矢量</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="wrap-item code-vector-package-download" id="code-vector-package-download">
                                                    <div class="label-title">打包下载：</div>
                                                    <div class="vector-content">
                                                        <div class="vector-download-item package-download" id="package-download" onclick="StatisticsData(352,124315)">
                                                            <div class="download-box">
                                                                <img alt="" src="../../assets/images/04d5532a149b.png"/>
                                                                <span class="format-text">打包3种格式的矢量格式文件</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- QR Style wrapper -->
                            <div class="qr-style-wrapper">
                                <div class="qr-style-content">
                                    <div class="close">×</div>
                                    <div class="real-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal for comment -->

                    <div class="modal fade" data-backdrop="static" id="modal-alert-comment-box">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header" style="padding:15px 15px;border-bottom: none;">
                                    <button class="close" data-dismiss="modal" id="comment-close-button" style="position: absolute;right: 15px;top: 15px;" type="button">
                                        <span aria-hidden="true">×</span>
                                        <span class="sr-only">Close</span>
                                    </button>
                                    <h4 class="modal-title"></h4>
                                </div>
                                <div class="modal-body p-x-md" style="padding-top:0px;padding-bottom:0px;">
                                    <div id="comment-box"></div>
                                    <div class="feedback-item clearfix feedback-box">
                                        <div class="feedback-label">
                                            回复方式
                                        </div>
                                        <div class="feedback-content feedback-content-500">
                                            <div>
                                                <label class="radio-inline">
                                                    <input id="receiveWechat" name="receiveMethodModal" type="radio" value="wechat"/> 微信快捷接收（推荐）
                                                </label>
                                                <label class="radio-inline">
                                                    <input id="receiveEmail" name="receiveMethodModal" type="radio" value="email"/> 邮箱接收
                                                </label>
                                            </div>
                                            <div class="none m-t" id="email-area">
                                                <input class="form-control text-xs" id="email" name="email" placeholder="我们将以邮件形式答复你" type="text" value=""/>
                                            </div>
                                            <div class="none m-t text-darkgrey" id="wechat-area">
                                                <img alt="" class="m-r" id="wechat-qr" src=""/>
                                                <div class="logo-in-qrcode">
                                                    <img alt="loading" src="../../assets/images/28ae6fb6d9ad.png"/>
                                                </div>
                                                <div class="scan-success none">
                                                    <i class="fa fa-check text-green"></i> 已关注
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer" style="border-top: none;">
                                    <span class="m-l text-danger none" id="error-message"></span>
                                    <button class="btn btn-outline b-green text-green" data-dismiss="modal" id="publish-cancel-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 11px;width:72px;">取消</button>
                                    <button class="btn green" data-loading-text="提交中..." id="publish-submit-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 12px;width:72px;">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content tabs section -->
        <div class="tab-file-box new-light bottom-white-line">
            <div class="page-main-content" style="position: relative;">
                <div class="nav-fixed-empty"></div>
                <div id="tab-nav">
                    <ul class="tab-ul list_tab page-main-content">
                        <li class="tab-item noMarginLeft active" data-id="3432" data-name="功能介绍" data-tab-id="3432" data-tab-item="" data-tab-path="info" data-tab-type="blog" data-tab-url="/img" data-type="图片"><a href="img.html" rel="canonical" title="功能介绍">
                                                        功能介绍                    </a></li><li class="tab-item" data-id="3834" data-name="最近建码" data-tab-id="3834" data-tab-item="" data-tab-path="other" data-tab-type="tp_view" data-tab-url="/img/other" data-type="图片"><a href="img/other.html" rel="canonical" title="最近建码">
                                                        最近建码                    </a></li><li class="tab-item" data-id="3598" data-name="讨论" data-tab-id="3598" data-tab-item="" data-tab-path="comment" data-tab-type="comment" data-tab-url="/img/comment" data-type="图片"><a href="img/comment.html" id="comment-tab-item" rel="canonical" title="讨论">
                            讨论(376)
                                                </a></li>
                    </ul>
                </div>
                <a class="text-darkgrey back-to-old-version" href="user/active/addActive.html" onclick="StatisticsData(110,153)" rel="nofollow" target="_blank">返回旧版</a>
            </div>
        </div>

        <!-- Blog content container -->
        <div id="new-blog-container"></div>

        <!-- Main content area -->
        <div class="w-p100 p-b-lg tab-img-box white tab-content-container">
            <div class="page-main-content white">
                <!-- Article content -->
                <div class="article-tab-box clearfix" id="article">
                    <div class="wordpress-article">
                        <div class="wiki wordpress-article-box doc-content inline" id="wordpress_article_box">
                            <div class="wait-now" id="wait_now" style="display: none;">
                                <img alt="loading" src="../../assets/images/cbd0851f409c.gif"/>
                            </div>

                            <div class="wordpress_article_info_box entry-content" id="wordpress_article_info_box">
                                <p>把图片生成二维码，扫码即可查看、下载、分享图片内容。支持上传多张图片、多种排版样式，满足常见的展示和管理需求。</p>

                                <h2>一、核心功能</h2>
                                <h3>1. 支持多种图片格式</h3>
                                <p>支持 png , jpg , jpeg , gif 等多种常见图片格式，无需转换图片格式即可快速生成二维码。</p>

                                <h3>2. 实时更新二维码内容</h3>
                                <p>更换图片或修改信息后，二维码也会同步更新，不用重新生成，节省时间和成本。</p>

                                <h3>3. 设置访问权限</h3>
                                <p>通过加密二维码分享，确保只有授权用户能够扫描查看内容。<a href="help/50292.html" title="更多查看权限设置">查看更多权限设置</a></p>

                                <p><img alt="图片码核心功能" class="smallpic75" data-height="1076" data-width="1648" src="../../assets/images/ab5c95446d02.png"/></p>

                                <h2>二、丰富的展示效果</h2>
                                <h3>1. 多样化排版</h3>
                                <p>支持<strong>单图</strong>和<strong>多图</strong>展示，提供<strong>多种排版样式</strong>，适应不同展示需求。</p>

                                <h3>2. 轮播、跳转等动态效果</h3>
                                <p>支持图片轮播、点击跳转等动态功能，提升用户浏览体验，使内容展示更加生动。</p>

                                <h3>3. 多种内容组合</h3>
                                <p>在二维码中加入<strong>图文</strong>、<strong>文件</strong>、<strong>音视频</strong>等多种内容样式，增强表现力和互动性。</p>

                                <p><img alt="图片效果" class="smallpic75" data-height="1076" data-width="1648" src="../../assets/images/6bb8175148d4.png"/></p>

                                <h2>三、免费与付费功能</h2>
                                <h3>1. 免费版</h3>
                                <ul>
                                    <li><strong>不限数量</strong>：生成二维码数量无限制。</li>
                                    <li><strong>无限上传</strong>：电脑端上传图片数量无上限（手机端图片码单码上传限制最多20张图片）</li>
                                    <li><strong>无限扫描</strong>：扫码次数、人数均不受限制。</li>
                                    <li><strong>长期有效</strong>：二维码长期有效，无需担心过期。</li>
                                </ul>

                                <h3>2. 付费权益</h3>
                                <ul>
                                    <li><strong>高清展示</strong>：图片不压缩，保持原始清晰度。</li>
                                    <li><strong>去除水印</strong>：付费后图片水印将去除，展示效果更好。</li>
                                    <li><strong>无限上传</strong>：上传图片数量无上限。</li>
                                    <li><strong>展示企业品牌形象</strong>：扫码时展示企业品牌名和Logo，提升品牌形象。</li>
                                    <li><strong>团队协作</strong>：支持多人协作管理，适合团队使用。</li>
                                </ul>

                                <p><a href="help/48216.html" title="了解更多付费权益">了解更多付费权益</a></p>

                                <h2>四、应用场景</h2>
                                <p>二维码不仅可以展示图片，还可以展示任何你想展示的信息。</p>
                                <p>以下模板来自真实用户案例，你可以快速借鉴，轻松搭建你的二维码。</p>

                                <div class="link-card-list default theme-">
                                    <a class="link-card-item" href="template/detail/38373533.html" rel="" target="_blank" title="产品详情介绍">
                                        <div class="link-card-item-image">
                                            <img alt="产品详情介绍" src="../../assets/images/193493e9bf30.png"/>
                                        </div>
                                        <div class="link-card-item-content">
                                            <p class="link-card-item-title">产品详情介绍</p>
                                            <p class="link-card-item-description">展示产品介绍图文视频等，内容随时更新</p>
                                        </div>
                                        <div class="divider"></div>
                                        <span class="link-card-item-btn">查看模板</span>
                                    </a>

                                    <a class="link-card-item" href="template/detail/9827540.html" rel="" target="_blank" title="产品目录">
                                        <div class="link-card-item-image">
                                            <img alt="产品目录" src="../../assets/images/42a4a3b22f37.png"/>
                                        </div>
                                        <div class="link-card-item-content">
                                            <p class="link-card-item-title">产品目录</p>
                                            <p class="link-card-item-description">按分类展示产品，供客户挑选，可收藏分享</p>
                                        </div>
                                        <div class="divider"></div>
                                        <span class="link-card-item-btn">查看模板</span>
                                    </a>

                                    <a class="link-card-item" href="template/detail/128101.html" rel="" target="_blank" title="旅游行程介绍">
                                        <div class="link-card-item-image">
                                            <img alt="旅游行程介绍" src="../../assets/images/6409fd3ab152.png"/>
                                        </div>
                                        <div class="link-card-item-content">
                                            <p class="link-card-item-title">旅游行程介绍</p>
                                            <p class="link-card-item-description">用丰富图文介绍行程安排、路线特色等</p>
                                        </div>
                                        <div class="divider"></div>
                                        <span class="link-card-item-btn">查看模板</span>
                                    </a>
                                </div>

                                <p><br/></p>
                                <p><a class="wordpressBtn text-white" href="template.html">查看全部模板</a></p>
                            </div>
                        </div>
                        <div class="wikiOutlineWrapper" ref="outlineWrapper">
                            <ul class="wikiOutlineContainer" ref="outlineContainer">
                                <li v-for="(item, index) in outlineItems"
                                    :key="index"
                                    :class="['item', { active: activeOutlineIndex === index }]"
                                    :data-target-header="item.tagName"
                                    @click="scrollToHeader(item, index)">
                                  <span>{{ item.text }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert modal -->
        <div class="modal fade" data-backdrop="true" id="modal-alert">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">
                            <span aria-hidden="true">×</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body p-a-lg"></div>
                </div>
            </div>
        </div>

        <!-- Image preview modal -->
        <div class="help-modal-backdrop none" id="preview-image-modal">
            <div class="help-modal-backdrop-bg"></div>
            <div class="help-modal" style="width: 640px">
                <button class="close help-modal-backdrop-close" type="button">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">关闭</span>
                </button>
                <div class="help-modal-content text-center" style="background-color: #f6f9f7;border-radius: 4px;">
                    <img alt="" class="full" src="../../assets/images/b4c3a9ad0be2.png" srcset="//static.clewm.net/static/images/preview-img-example@2x_321d12e.png 2x" style="width: 374px;height: 338px;"/>
                </div>
            </div>
        </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 响应式数据
const wikiOutlineNavigatorIns = ref(null)

// Outline navigation state
const outlineItems = ref<Array<{ text: string, tagName: string, element: HTMLElement }>>([])
const activeOutlineIndex = ref(-1)
const isScrolling = ref(false)
const outlineWrapper = ref<HTMLElement | null>(null)
const outlineContainer = ref<HTMLElement | null>(null)

// 定义组件元信息
const metaInfo = {
  title: '草料图片二维码生成器，帮你把图片生成二维码，微信扫一扫即可查看图片',
  meta: [
    { name: 'description', content: '草料二维码帮你将图片转换成二维码，强大的图文排版功能，扫一扫二维码就能图文并茂的查看企业宣传或产品介绍或旅游行程或活动安排等内容' },
    { name: 'keywords', content: '草料二维码,图片二维码,二维码图片生成,图片生成,图文活码,图片二维码,二维码图片,扫码查看图片,企业宣传二维码,产品介绍,旅游行程,活动安排,课程介绍' },
    { property: 'og:title', content: '草料图片二维码生成器，帮你把图片生成二维码，微信扫一扫即可查看图片' },
    { property: 'og:description', content: '草料二维码帮你将图片转换成二维码，强大的图文排版功能，扫一扫二维码就能图文并茂的查看企业宣传或产品介绍或旅游行程或活动安排等内容' },
    { property: 'og:image', content: 'https://gstatic.clewm.net/caoliao-resource/240407/6b2aef_89bd6906.png' },
    { name: 'referrer', content: 'no-referrer-when-downgrade' }
  ],
  link: [
    { rel: 'canonical', href: 'https://cli.im/img' },
    { rel: 'icon', type: 'image/x-icon', href: 'assets/images/ceba46bf2ecc.ico' },
    { rel: 'shortcut icon', type: 'image/x-icon', href: 'assets/images/ceba46bf2ecc.ico' }
  ]
}

// 简化的初始化逻辑（参考files页面）
onMounted(() => {
  // Set document attribute
  document.documentElement.setAttribute('auto_version', Date.now())
  
  // Initialize application
  initializeApp()
  
  // Initialize upload functionality
  initializeUploadFunctionality()
  
  // Initialize navigation
  updateNavigationActive()
  ensureRouterLinkCompatibility()
  
  // Initialize outline navigation
  initOutlineNavigation()
})

onUnmounted(() => {
  // Cleanup scroll listener
  if (scrollCleanup) {
    scrollCleanup()
  }
  // Cleanup if needed
  wikiOutlineNavigatorIns.value = null
})

const initializeApp = () => {
  // 确保主要内容区域可见
  const initContent = document.querySelector('.x-initContent')
  if (initContent) {
    initContent.style.visibility = 'visible'
  }
  
  // Initialize browser info
  ;(window as any).__NEW_BROWSER_INFO = {
    ua: navigator.userAgent,
    language: navigator.language
  }
  
  // Initialize router base
  ;(window as any).routerBase = "/"
  
  // Initialize jquery check
  ;(window as any).__is_pass_load_jquery = window.location.pathname.indexOf("/img") > -1
}

const initializeUploadFunctionality = () => {
  // 启用文件上传功能
  const uploadInput = document.getElementById('filedatacode')
  if (uploadInput) {
    uploadInput.disabled = false
    uploadInput.style.cursor = 'pointer'

    // 添加基本的文件上传事件监听
    uploadInput.addEventListener('change', (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        handleFileUpload(files)
      }
    })
  }

  // 启用拖拽上传区域
  const uploadArea = document.getElementById('upload-before')
  if (uploadArea) {
    uploadArea.addEventListener('click', () => {
      if (uploadInput) {
        uploadInput.click()
      }
    })

    // 拖拽功能
    uploadArea.addEventListener('dragover', (e) => {
      e.preventDefault()
      uploadArea.classList.add('drag-over')
    })

    uploadArea.addEventListener('dragleave', (e) => {
      e.preventDefault()
      uploadArea.classList.remove('drag-over')
    })

    uploadArea.addEventListener('drop', (e) => {
      e.preventDefault()
      uploadArea.classList.remove('drag-over')
      const files = e.dataTransfer.files
      if (files && files.length > 0) {
        handleFileUpload(files)
      }
    })
  }
}

const handleFileUpload = (files) => {
  // 基本的文件处理逻辑
  Array.from(files).forEach(file => {
    if (file.type.startsWith('image/')) {
      // 这里可以添加图片预览和二维码生成逻辑
    }
  })
}

// Outline navigation functions
const initOutlineNavigation = () => {
  nextTick(() => {
    collectHeaders()
    setupScrollListener()
  })
}

const collectHeaders = () => {
  // Collect h2 and h3 elements from the wordpress article content
  const headers = document.querySelectorAll('#wordpress_article_info_box h2, #wordpress_article_info_box h3')
  outlineItems.value = Array.from(headers).map((header) => ({
    text: header.textContent || '',
    tagName: header.tagName,
    element: header as HTMLElement
  }))
  
  // Set the first item as active by default
  if (outlineItems.value.length > 0) {
    activeOutlineIndex.value = 0
  }

  // Show or hide outline container based on whether there are headers
  if (outlineWrapper.value) {
    if (outlineItems.value.length > 0) {
      outlineWrapper.value.style.display = 'block'
      outlineContainer.value?.classList.add('hasOutline')
    } else {
      outlineWrapper.value.style.display = 'none'
      outlineContainer.value?.classList.remove('hasOutline')
    }
  }

  // Sync initial state
  syncActiveHeader()
}

const setupScrollListener = () => {
  const throttledSync = throttle(syncActiveHeader, 200)
  window.addEventListener('scroll', throttledSync)

  // Store cleanup function
  scrollCleanup = () => {
    window.removeEventListener('scroll', throttledSync)
  }
}

const syncActiveHeader = () => {
  if (isScrolling.value || outlineItems.value.length === 0) return

  let activeIndex = 0 // Default to first item
  const scrollTop = window.scrollY
  const headerOffsetTop = 100 // Offset for header detection

  // Find the current active header based on scroll position
  for (let i = 0; i < outlineItems.value.length; i++) {
    const element = outlineItems.value[i].element
    const elementTop = element.offsetTop - headerOffsetTop
    
    if (scrollTop >= elementTop) {
      activeIndex = i
    } else {
      break
    }
  }

  activeOutlineIndex.value = activeIndex
}

const scrollToHeader = (item: { element: HTMLElement, text: string }, index: number) => {
  if (activeOutlineIndex.value === index || isScrolling.value) return

  activeOutlineIndex.value = index
  isScrolling.value = true

  // Smooth scroll to the target header
  const offsetTop = item.element.offsetTop
  window.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  })

  // Reset scrolling flag after animation
  setTimeout(() => {
    isScrolling.value = false
  }, 800)
}

const throttle = (fn: Function, threshold: number) => {
  let last = 0
  let timer: number | null = null

  return function (...args: any[]) {
    const now = Date.now()

    if (now - last < threshold) {
      if (timer) window.clearTimeout(timer)
      timer = window.setTimeout(() => {
        fn.apply(this, args)
        last = Date.now()
      }, threshold)
      return
    }

    last = now
    return fn.apply(this, args)
  }
}

let scrollCleanup: (() => void) | null = null

// ==================== Router-Link 导航管理功能 ====================
    
// 更新导航高亮状态 - 保持原有CSS类名和样式行为
const updateNavigationActive = () => {
  if (!route) return // 如果router不可用，跳过
  
  const currentPath = route.path
  
  // 更新主导航高亮 - 保持原有的样式类名
  const mainNavLinks = document.querySelectorAll('.sub_nav router-link')
  mainNavLinks.forEach(link => {
    const parentLi = link.closest('li')
    if (parentLi) {
      // 移除所有可能的激活状态类
      parentLi.classList.remove('active', 'on', 'current')
      link.classList.remove('active', 'on', 'current', 'router-link-active', 'router-link-exact-active')
      
      if (link.getAttribute('to') === currentPath) {
        // 添加激活状态 - 使用原有的类名以保持CSS样式
        parentLi.classList.add('active')
        link.classList.add('on') // 保持原有的on类以确保样式正确
      }
    }
  })
  
  // 特殊处理：确保图片页面的导航项有正确的状态
  if (currentPath.includes('/img')) {
    const imgNavItem = document.querySelector('.sub_nav router-link[to*="/img"]')
    if (imgNavItem) {
      imgNavItem.classList.add('on')
      const parentLi = imgNavItem.closest('li')
      if (parentLi) parentLi.classList.add('active')
    }
  }
}

// 确保router-link与原有CSS完全兼容
const ensureRouterLinkCompatibility = () => {
  // 等待DOM完全渲染后执行
  nextTick(() => {
    const routerLinks = document.querySelectorAll('router-link')
    routerLinks.forEach(link => {
      // 确保每个router-link都有正确的样式属性
      const computedStyle = window.getComputedStyle(link)
      
      // 如果router-link没有正确继承样式，强制设置
      if (computedStyle.textDecoration !== 'none') {
        link.style.textDecoration = 'none'
      }
      if (computedStyle.color === 'rgb(0, 0, 238)') { // 默认链接蓝色
        link.style.color = 'inherit'
      }
      
      // 确保router-link填充整个父容器（如果需要）
      const parent = link.parentElement
      if (parent && parent.tagName === 'LI') {
        link.style.display = 'block'
        link.style.width = '100%'
        link.style.height = '100%'
      }
    })
  })
}

// 统计数据收集方法（兼容原有功能）
const StatisticsData = (fir, sec) => {
  console.log('StatisticsData called:', fir, sec)
  // 简化实现，保留函数签名，确保页面交互正常
}

// Vue Router钩子 - 处理路由变化
watch(
  () => route,
  (to, from) => {
    if (to && from) {
      console.log('Route changed from', from.path, 'to', to.path)
      // 更新导航高亮状态
      nextTick(() => {
        updateNavigationActive()
      })
    }
  }
)

// 暴露给模板使用
defineExpose({
  metaInfo,
  StatisticsData
})
</script>

<style src="../../assets/css/490815b50ee0.css" scoped/>
<style src="../../assets/css/00b58f2b8f9a.css" scoped/>
<style src="../../assets/css/e88b6e80fbce.css" scoped/>
<style src="../../assets/css/f6d6073f1386.css" scoped/>
<style src="../../assets/css/c1a2dbc35903.css" scoped/>
<style src="../../assets/css/0ff6e05882a2.css" scoped/>
<style src="../../assets/css/b76aaf663b7f.css" scoped/>
<style src="../../assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="../../assets/css/9ded6fd30ce6.css" scoped/>
<style src="../../assets/css/675809675152.css" scoped/>
<style src="../../assets/css/2034b15460f1.css" scoped/>
<style src="../../assets/css/badea43cb35b.css" scoped/>
<style src="../../assets/css/b42bbd4c9ea8.css" scoped/>
<style src="../../assets/css/dbece38160fc.css" scoped/>
<style src="../../assets/css/c1580d903c0f.css" scoped/>
<style src="../../assets/css/963d993f037a.css" scoped/>
<style src="../../assets/css/4f203d7b339f.css" scoped/>
<style src="../../assets/css/228034f02af3.css" scoped/>
<style src="../../assets/css/acfff1e57b0e.css" scoped/>
<style src="../../assets/css/3db6acd047a4.css" scoped/>
<style src="../../assets/css/550d0fc5c52a.css" scoped/>
<style src="../../assets/css/7272988962e3.css" scoped/>
<style src="../../assets/css/b64637f7e36e.css" scoped/>
<style src="../../assets/css/cac1baa43ce6.css" scoped/>
<style src="../../assets/css/82dc0233b1fb.css" scoped/>
<style src="../../assets/css/5fd66d82cf52.css" scoped/>
<style src="../../assets/css/52f4b4a7ee30.css" scoped/>
<style src="../../assets/css/page-img-embedded-styles.css" scoped/>

<style>

.wikiOutlineWrapper {
  width: 260px !important;
  margin-left: 64px !important;
  margin-top: 0 !important;
  position: sticky !important;
  top: 80px !important;
  display: block !important;
  visibility: visible !important;
}
/* 修复显示问题 - 确保主要内容区域可见 */
/*
.x-initContent {
  visibility: visible !important;
}

!* 确保文件上传输入框可以点击 *!
.uploadfile {
  cursor: pointer !important;
}

!* 完整的原始导航样式 - 来自 acfff1e57b0e.css 和 b64637f7e36e.css *!
.wikiOutlineWrapper {
  width: 260px !important;
  margin-left: 64px !important;
  position: sticky !important;
  top: 80px !important;
  display: block !important;
  visibility: visible !important;
}

!* 基础样式 - 来自 b64637f7e36e.css *!
.wikiOutlineContainer {
  position: relative !important;
  font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans', Tahoma, 'Arial', 'simsun', 'sans-serif' !important;
  padding-left: 0 !important;
  border-left: 1px solid rgba(120, 130, 140, 0.1) !important;
  margin: 0 !important;
  margin-left: 0 !important;
  display: block !important;
  list-style: none !important;
}

.wikiOutlineContainer .item {
  color: rgba(60, 60, 67, 0.75) !important;
  font-size: 13px !important;
  line-height: 22px !important;
  display: block !important;
  cursor: pointer !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 16px !important;
  transition: color 0.3s !important;
  text-decoration: none !important;
}

.wikiOutlineContainer .item:hover {
  color: #3c3c43 !important;
}

.wikiOutlineContainer .item.active {
  color: rgba(60, 60, 67) !important;
}

!* tab-content-container 中的激活颜色覆盖 - 来自 acfff1e57b0e.css *!
.tab-content-container .wikiOutlineContainer .item.active {
  color: #008C33 !important;
}

.wikiOutlineContainer .item.active::before {
  content: ' ' !important;
  width: 2px !important;
  height: 18px !important;
  left: -1px !important;
  background-color: #166BC7 !important;
  display: inline-block !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 2px !important;
}

!* tab-content-container 中的激活前缀颜色覆盖 *!
.tab-content-container .wikiOutlineContainer .item.active::before {
  background-color: #008C33 !important;
}

.wikiOutlineContainer .item.item-title {
  font-weight: 600;
  color: #3C3C43;
}

.wikiOutlineContainer .item > span {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.wikiOutlineContainer .item:not([data-target-header="H2"]) {
  font-size: 13px;
  margin: 0;
}

.wikiOutlineContainer .item + .item {
  margin-top: 0;
}

.wikiOutlineContainer .item[data-target-header="H2"] + [data-target-header="H3"] {
  margin-top: 0;
}

.wikiOutlineContainer [data-target-header="H3"] + [data-target-header="H3"],
.wikiOutlineContainer [data-target-header="H2"] + [data-target-header="H3"] {
  padding-left: 32px;
}
*/

/* ==================== Router-Link 兼容性样式修复 ==================== */
/* 确保router-link与原有a标签样式完全一致，防止路由跳转时样式受损 */

/* 基础样式重置 - 确保router-link继承所有父级样式 */
.sub_nav li router-link,
.tab-ul li router-link,
.cli_nav router-link {
  text-decoration: none !important;
  color: inherit !important;
  display: inline-block !important;
  width: 100%;
  height: 100%;
  padding: inherit;
  margin: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  background: inherit;
  border: inherit;
  transition: inherit;
  box-sizing: border-box;
  line-height: inherit;
  letter-spacing: inherit;
}

/* 伪类状态样式修复 */
.sub_nav li router-link:hover,
.tab-ul li router-link:hover,
.sub_nav li router-link:visited,
.tab-ul li router-link:visited,
.sub_nav li router-link:focus,
.tab-ul li router-link:focus {
  text-decoration: none !important;
  color: inherit !important;
  background: inherit;
  outline: none;
}

/* 全局router-link样式重置 */
router-link {
  text-decoration: none !important;
  color: inherit !important;
  display: inline-block;
}

/* 特殊类名router-link样式修复 */
router-link.t06971093650622ab_sep,
router-link.tab_sep,
router-link.template-code,
router-link.on {
  display: inline-block !important;
  text-decoration: none !important;
  color: inherit !important;
  width: auto;
  height: auto;
}

/* 导航激活状态管理 - 保持原有CSS类名行为 */
.sub_nav li.active router-link,
.sub_nav li router-link.router-link-active,
.sub_nav li router-link.on,
.tab-ul li.active router-link,
.tab-ul li router-link.router-link-active,
.tab-ul li router-link.on {
  /* 继承原有激活状态的所有样式 */
}

/* CSS选择器兼容性 - 同时支持a标签和router-link */
.cli_nav a,
.cli_nav router-link,
.sub_mobile_nav a,
.sub_mobile_nav router-link,
.cli_head_container a,
.cli_head_container router-link {
  display: inline-block;
  text-decoration: none !important;
  color: inherit !important;
  padding: inherit;
  margin: inherit;
}

/* 模板库建码按钮特殊处理 */
router-link.template-code {
  display: inline-block !important;
  text-decoration: none !important;
  color: inherit !important;
}

router-link.template-code .clifont {
  color: inherit !important;
}

/* 强制覆盖可能影响router-link的全局样式 */
* router-link,
*:not(style) router-link {
  text-decoration: none !important;
}

/* 确保router-link在各种容器中的样式一致性 */
.clearfix router-link,
.pull-left router-link,
.pull-right router-link {
  text-decoration: none !important;
  color: inherit !important;
}

/* 响应式兼容 */
@media (max-width: 768px) {
  .sub_nav li router-link,
  .sub_mobile_nav li router-link {
    width: 100%;
    display: block !important;
  }
}

/* 处理特定导航项的样式 */
.right-nav-items router-link {
  text-decoration: none !important;
  color: inherit !important;
  display: inline-block !important;
}

/* 图片页面特有的导航样式 */
.sub_nav li router-link[to*="/img"] {
  /* 确保图片页面导航项样式正确 */
  font-weight: inherit;
  color: inherit !important;
}

.sub_nav li router-link[to*="/img"].on,
.sub_nav li.active router-link[to*="/img"] {
  /* 图片页面激活状态样式 */
  color: inherit !important;
  background: inherit;
}

</style>
